<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/elementUI.js"></script>
    <script src="js/axios.js"></script>
    <link rel="stylesheet" href="css/elementUI.css">
</head>
<body>
<div id="app">

    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="员工姓名">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="部门">
            <el-select v-model="form.did" placeholder="请选择部门" :clearable="true">
                <el-option v-for="dept in deptList" :label="dept.name" :value="dept.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="生日时间">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="form.date1"
                                style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="form.date2"
                                style="width: 100%;"></el-date-picker>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="findPage">查询</el-button>
            <el-button type="primary" @click="handleAdd">添加</el-button>
            <el-button type="primary" @click="deleteBatch">批量删除</el-button>
            <el-button type="primary" @click="exportExcel">导出</el-button>
            <el-upload
                    action="/uploadExcel"
                    :show-file-list="false"
                    name="file"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <el-button type="primary">导入</el-button>
            </el-upload>
        </el-form-item>
    </el-form>


    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="编号"
                prop="id"
                width="120">

        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="120">
        </el-table-column>
        <el-table-column
                label="性别"
                width="120">
            <template slot-scope="scope">{{ scope.row.sex=='0'?'男':'女' }}</template>
        </el-table-column>
        <el-table-column
                prop="hobby"
                label="爱好"
                width="120">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                width="120">
        </el-table-column>
        <el-table-column
                prop="birthday"
                label="生日"
                width="120">
        </el-table-column>
        <el-table-column
                label="部门"
                width="120">
            <template slot-scope="scope">{{ scope.row.dept==null?'':scope.row.dept.name }}</template>
        </el-table-column>
        <el-table-column
                label="操作"
                width="120">
            <template slot-scope="scope">
                <el-button @click="handleEdit(scope.row.id)" type="text" size="small">编辑</el-button>
                <el-button @click="deleteRow(scope.row.id)" type="text" size="small">移除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2,4,6,8]"
            :page-size="pageSize"
            prev-text="上一页"
            next-text="下一页"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog :title="pojo.id==null?'添加':'修改'" :visible.sync="dialogFormVisible">
        <el-form ref="pojo" :model="pojo" label-width="80px">
            <el-form-item label="活动名称">
                <el-input v-model="pojo.name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="pojo.sex">
                    <el-radio label="0">男</el-radio>
                    <el-radio label="1">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="爱好">
                <el-checkbox-group v-model="hobby">
                    <el-checkbox label="唱" name="hobby"></el-checkbox>
                    <el-checkbox label="跳" name="hobby"></el-checkbox>
                    <el-checkbox label="rap" name="hobby"></el-checkbox>
                    <el-checkbox label="篮球" name="hobby"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="生日">
                <el-date-picker type="date" placeholder="选择日期" v-model="pojo.birthday"
                                value-format="yyyy-MM-dd"
                                style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="pojo.address"></el-input>
            </el-form-item>
            <el-form-item label="部门">
                <el-select v-model="pojo.did" placeholder="请选择部门" :clearable="true">
                    <el-option v-for="dept in deptList" :label="dept.name" :value="dept.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addOrUpdate">确认</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            tableData: [], //table表格的数据
            multipleSelection: [], // 被选中的对象
            pageNum: 1, // 当前页码
            pageSize: 2, // 每页展示的数据量
            total: 0, // 总数量
            form: {},
            deptList: [],
            hobby: [],
            pojo: {},
            dialogFormVisible: false
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.findPage();
            },
            beforeAvatarUpload(file) {

                return true;
            },
            exportExcel(){
                location.href="/exportExcel";
            },
            deleteBatch(){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("/deleteBatch",this.multipleSelection).then(res => {
                        // 刷新页面
                        this.findPage();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addOrUpdate() {
                this.pojo.hobby = this.hobby.join(",");
                axios.post(`/${this.pojo.id == null ? 'add' : 'update'}`, this.pojo).then(res => {
                    this.findPage();
                    this.dialogFormVisible = false;
                })
            },
            handleAdd() {
                this.dialogFormVisible = true;
                this.pojo = {};
                this.hobby = [];
            },
            findDeptList() {
                axios.get("/findDeptList").then(res => {
                    this.deptList = res.data;
                })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.findPage();
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.findPage();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleEdit(id) {
                axios.get(`/findById?id=${id}`).then(res => {
                    this.dialogFormVisible = true;
                    this.pojo = res.data;
                    this.hobby = this.pojo.hobby.split(",");

                })
            },
            deleteRow(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/deleteById?id=" + id).then(res => {
                        // 刷新页面
                        this.findPage();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            findPage() {
                axios.post(`/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.form).then(res => {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })
            }
        },
        created() { // 钩子函数，可以被自动调用的函数
            // 创建对象之后，自动被调用。
            this.findPage();
            this.findDeptList();
        }
    })
</script>
</body>
</html>